<template>
	<view class="container">
		<view class="tabs" :style="{'top': navHeight + 'px'}">
			<u-tabs :list="titleList" :scrollable="false" :current="current" @click="tabClick" lineColor="#FC5E53" :activeStyle="{color: '#FC5E53'}"></u-tabs>
		</view>
		<view class="content">
			<orderItem @click='orderDetailTap' @goPay='goPay(item)' @cancelPay='cancelPay(item)' @cancelOrder='cancelOrder(item)' @finishOrder='finishOrder(item)' @returnItem='returnItem(item)' @repay='repay(item)' :orderModel="item" v-for="(item, i) in itemList" :key="i"></orderItem>
		</view>
		<view style="padding-top: 300rpx;" v-if='itemList.length==0'>
			<u-empty text="暂无数据" mode="list"></u-empty>
		</view>
	</view>
</template>

<script>
	import {common} from '@/api/common.js'
	import {order} from '@/api/order.js'
	import {wxminiproOrderIdPay} from '@/common/utils/wxminiproPay.js'
	import orderItem from "@/pageA/order/components/orderItem.vue"
	export default{
		components: { orderItem },
		data() {
			return {
				type: '',
				page: 1,
				size: 16,
				totalPage: 0,
				showEmpty: false,
				isLastPage: false,
				itemList: [],
				titleList: [{name: '全部'}, {name: '待付款'}, {name: '待发货'}, {name: '待收货',},{name: '已完成',}],
				current: 0, // tabs组件的current值，表示当前活动的tab选项
				orderStatusList: ['', 'WAIT_PAY', 'WAIT_SEND', 'WAIT_RECEIVE', 'FINISH'],
				navHeight: 0//uni.getSystemInfoSync().statusBarHeight + 44,
			}
		},
		onLoad() {
			if(this.$Route.query.current){
				this.current = this.$Route.query.current
			}
		},
		onShow() {
			this.tabsChange(this.current)
		},
		onPullDownRefresh() {
			this.page = 1
			this.getOrderList()
		},
		onReachBottom() {
			if (this.isLastPage) {
				console.log('已无数据')
				return
			}
			console.log('上拉加载更多')
			this.getOrderList()
		},
		methods:{
			back(){
				uni.navigateBack()
			},
			tabClick(item){
				console.log('当前活动', item)
				this.tabsChange(item.index)
			},
			tabsChange(index){
				
				this.current = index;
				this.page = 1
				this.getOrderList()
			},
			orderDetailTap(orderModel){
				this.$Router.push({
					name: 'orderDetail',
					params: {
						orderId: orderModel.orderId
					}
				})
			},
			//去支付
			goPay(orderModel){
				uni.showLoading({
					title: '加载中',
					mask: true
				})
				var params = {
					orderId: orderModel.orderId
				}
				var _this = this
				wxminiproOrderIdPay(params).then(res => {
					uni.hideLoading()
					uni.showModal({
						content: '支付成功',
						confirmText: '确定',
						showCancel: false,
						complete(_res) {
							if(_res.confirm){
								uni.reLaunch({
									url: '/pages/home/home'
								})
							}
						}
					})
				})
			},
			// 取消支付
			cancelPay(orderModel){
				var _this = this
				uni.showModal({
					title: '是否确认取消',
					confirmText: '确认',
					cancelText: '取消',
					success(res) {
						if(res.confirm){
							common.operateActionPost('/pay/order/cancelPay/', {
								orderId: orderModel.orderId
							}).then(res => {
								if(res.data.code == 10000){
									uni.showToast({
										title: '取消成功',
										icon:'none'
									})
									_this.tabsChange(0)
								}
							})
						}
					}
				})
			},
			//取消订单
			cancelOrder(orderModel){
				var _this = this
				uni.showModal({
					title: '是否确认取消',
					content: '取消后钱款将退回至您的付款账户中',
					confirmText: '确认',
					cancelText: '取消',
					success(res) {
						if(res.confirm){
							common.operateActionPost('/pay/order/cancelOrder/', {
								orderId: orderModel.orderId
							}).then(res => {
								if(res.data.code == 10000){
									uni.showToast({
										title: '取消成功',
										icon:'none'
									})
									_this.tabsChange(0)
								}
							})
						}
					}
				})
			},
			//申请换货
			returnItem(orderModel){
				this.$Router.push({
					name: 'returnItem',
					params: {
						orderId: orderModel.orderId,
						activity: orderModel.itemModel.activity
					}
				})
			},
			//确认收货
			finishOrder(orderModel){
				var that = this
				uni.showModal({
					content: '是否确认收货',
					confirmText: '确认',
					cancelText: '取消',
					success(res) {
						if(res.confirm){
							order.finishOrder({
								orderId: orderModel.orderId
							}).then(res => {
								if(res.data.code == 10000){
									that.tabsChange(4)
								}
							})
						}
					}
				})
			},
			//再次购买
			repay(orderModel){
				uni.navigateTo({
					url:"/pages/itemDetail/itemDetail?itemId="+orderModel.itemId+'&type='+orderModel.orderType
				})
			},
			getOrderList(){
				this.currentOrderStatus = this.orderStatusList[this.current]
				console.log('当前选中的订单状态', this.currentOrderStatus)
				order.getOrderList({
					page: this.page,
					size: this.size,
					orderStatus: this.currentOrderStatus,
					user: this.$storage.getStorageDataSync(this.$store.state.userInfo).id
				}).then(res => {
					uni.stopPullDownRefresh();
					if(res.data.code == 10000){
						if (this.page == 1) {
							this.itemList = []
						}
						var list = res.data.data.list
						this.itemList = [...this.itemList, ...list]
						this.showEmpty = this.itemList.length < 1
						if (res.data.data.next) {
							this.page += 1
							this.isLastPage = false
						} else {
							this.isLastPage = true
						}
					}
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.tabs{
		position: fixed;
		width: 100%;
		height: 88rpx;
		z-index: 9999;
		background-color: #FFFFFF;
	}
	.content{
		margin-top: 108rpx;
		width: 710rpx;
		margin-left: 20rpx;
	}
</style>
